<template>
    <el-dialog v-model="show" :style="{ borderRadius: '1rem', padding: '0' }" align-center width="50%"
        :show-close="false" center @close="handleClose">

        <template #header>
            <div class="main_top">
                <div class="main_top_nav">
                    <div class="main_top_nav_right"></div>
                    <div class="main_top_nav_title">{{ props.initList?.productStyleName }}</div>
                    <div class="main_top_nav_right"></div>
                </div>

                <div class="main">
                    <div class="main_left">
                        <!-- <div class="main_left_title">
                            详细参数信息（单位：毫米）：
                        </div>
                        <div class="main_left_content">
                            长度：250mm宽度：250mm高度：35mm
                        </div>
                        <div class="main_left_content">
                            箱规信息：40盒/箱
                        </div> -->
                        <div class="main_left_content">
                            外盒生产工艺：{{ props.initList?.workmanshipDetail }}
                        </div>
                    </div>
                    <div class="main_right">
                        <el-image style="width: 100%;" :src="props.initList?.imageUrl" fit="contain" />
                    </div>
                </div>
            </div>
        </template>

        <div class="table" v-if="props.initList?.optionalDetail">
            <div class="item">
                <div style="flex: 1;">类别</div>
                <div style="flex: 1;text-align: center;">图片</div>
                <div style="flex: 2;text-align: center;">品名</div>
                <div style="flex: 1;text-align: center;">数量</div>
            </div>
            <div class="item" v-for="(item, index) in JSON.parse(props.initList?.optionalDetail)" :key="index">
                <div style="flex: 1;">{{ item.componentTypeName }}</div>
                <div style="flex: 1;justify-content: center;" class="flex"><el-image style="width: 7.5rem;"
                        :src="item.imageUrl" fit="contain" /></div>
                <div style="flex: 2;text-align: center;">
                    {{ item.concatName }}
                </div>
                <div style="flex: 1;text-align: center;">x{{ item.number }}</div>
            </div>
        </div>

        <div class="quotation">
            <div class="flex_between">
                <div>体量区间: {{ props.initList?.volume }}</div>
                <!-- <div>日期: {{ getCurrentDate() }}</div> -->

                <div>单价: {{ props.initList?.price }}元</div>
                <!-- <div>报价码:xxxx-xxxx-xxxx-xxxx</div> -->
            </div>
            <div class="flex_between">
                <!-- <div>合计总价: {{ getCalculatePrice() }} 元</div> -->
                <!-- <div>已生成报价码，请到对应业务人员处核对价格信息</div> -->
                <div>日期: {{ props.initList?.createTime }}</div>
            </div>
        </div>



        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关 闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['close']);
const show = computed(() => props.visible);

const handleClose = () => {
    emits('close');
};
</script>

<style lang="scss" scoped>
.main_top {
    width: 100%;
    border-radius: 1rem 1rem 0 0;
    background-color: #F0F0F0;
    padding-top: 1rem;

    &_nav {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        &_right {
            width: 11rem;
            font-size: 0.8rem;
            color: #333;
        }

        &_title {
            font-size: 1.2rem;
            color: #333;
        }
    }

    .main {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 2rem;

        &_left {
            &_title {
                width: 100%;
                font-size: 1rem;
                color: #333;
                margin-bottom: 8px;
                text-align: left;
                font-weight: bold;
            }

            &_content {
                width: 100%;
                font-size: 0.8rem;
                color: #333;
                margin-bottom: 6px;
                text-align: left;

            }
        }

        &_right {
            width: 12rem;
            height: 8rem;
            background-color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.table {
    width: 100%;
    padding: 0 2rem;
    max-height: 50vh;
    overflow-y: auto;

    .item {
        // height: 4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #E2E2E2;
        padding: .5rem;
        font-size: 1.2rem;
    }
}

.quotation {
    padding: 1rem 2rem 0;

    .flex_between {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
    }
}

.dialog-footer {
    margin-bottom: 1rem;
}

.flex {
    display: flex;
    align-items: center;
}

.el-dialog {
    margin: auto !important;
}
</style>